<template>
    <div class="white-box">
        <div class="table-mb">
            <el-button type="primary" @click="addColor">添加</el-button>
        </div>
        <el-table
            class="table-mb"
            v-loading="loading"
            :data="arr_data"
            :header-cell-style="{ background: '#F5F7FA' }"
            element-loading-background="rgba(255, 255, 255, 0.6)"
        >
            <el-table-column prop="color_id" label="颜色ID" width="140"></el-table-column>
            <el-table-column prop="title" label="颜色名称" min-width="180"></el-table-column>
            <el-table-column label="背景色" width="120">
                <template #default="{ row }">
                    <div class="sku-column">
                        <span class="sku-span" :style="{ background: row.color }" v-if="!row.color_img"></span>
                        <img class="sku-img" :src="proxy.imgUrl + row.color_img + '!img_200'" v-else />
                    </div>
                </template>
            </el-table-column>
            <el-table-column label="排序" min-width="130">
                <template #default="{ row }">
                    <el-input
                        v-model.trim="row.order_by"
                        clearable
                        placeholder="请输入排序数字"
                        oninput="value=value.replace(/[^\d]/g,'')"
                        style="width: 100px"
                        @change="() => inputSort(row)"
                    />
                </template>
            </el-table-column>
            <el-table-column prop="created_at_label" label="添加时间" min-width="220"> </el-table-column>
            <el-table-column label="操作" width="240" class-name="operation-nav" fixed="right">
                <template #default="{ row }">
                    <el-button link type="primary" class="theme-btn" @click="clickEdit(row)">编辑 </el-button>
                    <el-popconfirm title="是否确定删除？" confirm-button-text="确定" cancel-button-text="取消" @confirm="clickDel(row)">
                        <template #reference>
                            <el-button link type="primary" class="theme-btn">删除</el-button>
                        </template>
                    </el-popconfirm>
                </template>
            </el-table-column>
        </el-table>
        <!-- 分页 -->
        <el-pagination
            background
            v-model:current-page="page"
            v-model:page-size="pageSize"
            :page-sizes="pageSizeNum"
            :total="totalNums"
            layout="total, sizes, prev, pager, next, jumper"
        >
        </el-pagination>

        <!-- 添加/编辑 -->
        <el-dialog
            v-model="dialogColor"
            :title="colorType == 1 ? '添加颜色' : '编辑颜色'"
            width="560px"
            :append-to-body="true"
            :destroy-on-close="true"
            :close-on-click-modal="false"
            @close="closeAddColor"
        >
            <el-form ref="ruleColorRef" :model="ruleColorForm" :rules="ruleCheckColor" label-width="120px">
                <el-form-item label="颜色名称" prop="name">
                    <el-input v-model.trim="ruleColorForm.name" clearable placeholder="请输入颜色名称" />
                </el-form-item>
                <el-form-item label="排序" prop="sort" required>
                    <el-input v-model.number="ruleColorForm.sort" clearable oninput="value=value.replace(/[^\d]/g,'')" placeholder="请输入排序数字" />
                </el-form-item>
                <el-form-item label="颜色类型" prop="color_type">
                    <el-radio-group v-model="ruleColorForm.color_type">
                        <el-radio label="0">颜色RGB</el-radio>
                        <el-radio label="1">颜色图片</el-radio>
                    </el-radio-group>
                </el-form-item>
                <el-form-item label="颜色RGB" prop="color_rgb" required v-if="ruleColorForm.color_type == 0">
                    <el-tooltip class="box-item" effect="dark" content="右侧选择颜色值" placement="top-start">
                        <el-input v-model="ruleColorForm.color_rgb" placeholder="请点击右侧选择颜色值" clearable>
                            <template #append>
                                <el-color-picker v-model="ruleColorForm.color_rgb" size="default" />
                            </template>
                        </el-input>
                    </el-tooltip>
                </el-form-item>
                <el-form-item label="颜色图片" required v-if="ruleColorForm.color_type == 1">
                    <div class="img-box flexs-center" @click.stop="showImg = true" v-if="img_paths == ''">
                        <el-icon color="#999" size="26px">
                            <UploadFilled />
                        </el-icon>
                    </div>
                    <div class="img-selects" v-else>
                        <el-image class="img-selects__pic" :src="proxy.imgUrl + img_paths + '!img_400'" :preview-src-list="srcList" fit="cover" />
                        <div class="img-del" @click.stop="delImg">
                            <el-icon size="14px" color="#fff"><CloseBold /></el-icon>
                        </div>
                    </div>
                </el-form-item>
                <el-form-item>
                    <div class="flexs" style="margin-top: 30px">
                        <el-button type="primary" :loading="form_loading" @click="submitColorForm(ruleColorRef)">
                            {{ colorType == 1 ? "确认添加" : "确认修改" }}
                        </el-button>
                        <el-button @click="resetColorForm(ruleColorRef)">重置</el-button>
                    </div>
                </el-form-item>
            </el-form>
        </el-dialog>

        <!-- 图片库 -->
        <picture-library :show="showImg" :select_multiple="false" @close="showImg = false" @select="selectImg"> </picture-library>

        <go-back />
    </div>
</template>

<script setup>
import { getCurrentInstance, ref, onMounted, watch, reactive,onBeforeUnmount } from "vue"
import OneLoad from "@mixins/one-load"
import { UploadFilled, CloseBold } from "@element-plus/icons-vue"
import GoBack from "@components/GoBack.vue"
import PictureLibrary from "@components/PictureLibrary.vue"

const { proxy } = getCurrentInstance()

onMounted(() => {
    getList()
})

onBeforeUnmount(() => {
    
})

/**
 * minxin列表加载
 */
const { page, pageSizeNum, pageSize, loading, arr_data, totalNums, pubParams, getdata } = OneLoad()

// 切换每页显示条数
watch(pageSize, (val) => {
    page.value = 1
    pubParams(getList)
})
// 跳转第几页
watch(page, (val) => {
    pubParams(getList)
})

function getList() {
    let params = {
        page: page.value,
        limit: pageSize.value,
    }
    getdata("product/color/index", params)
}

/**
 * 添加图片
 * @property {Boolean} showImg 显示图片库
 * @property {String} img_paths 图片地址
 * @property {Function} selectImg 选择图片
 */
const showImg = ref(false)
const img_paths = ref("")
const srcList = ref([])
const selectImg = (val) => {
    showImg.value = false
    img_paths.value = val[0].photo
    srcList.value.push(proxy.imgUrl + val[0].photo)
}
const delImg = () => {
    img_paths.value = ""
    srcList.value = []
}

/**
 * 添加/编辑
 * @property {Boolean} dialogColor 添加/编辑弹窗状态
 * @property {Boolean} form_loading 提交按钮状态
 * @property {Number} colorType 弹窗类型，1是添加，2是编辑
 * @property {Array} ruleColorRef 表单规则
 * @property {Object} ruleColorForm  表单字段
 * @property {Object} ruleCheckColor  表单提示
 * @property {Function} submitColorForm 提交表单
 * @property {Function} addColor 添加颜色
 * @property {Function} closeAddColor 关闭弹窗
 */
const dialogColor = ref(false)
const form_loading = ref(false)
const colorType = ref(1)
const color_id = ref("")
const ruleColorRef = ref(null)
const ruleColorForm = reactive({
    name: "",
    sort: "100",
    color_type: "0",
    color_rgb: "#409EFF",
})
const ruleCheckColor = reactive({
    name: [{ required: true, message: "请输入颜色名称", trigger: "blur" }],
    sort: [{ required: true, message: "请输入排序数字", trigger: "blur" }],
    color_type: [{ required: true, message: "请选择颜色类型", trigger: "change" }],
})
const submitColorForm = (formEl) => {
    if (!formEl) return
    formEl.validate((valid, fields) => {
        if (valid) {
            if (ruleColorForm.color_rgb == "" && ruleColorForm.color_type == 0) {
                proxy.$message({ message: "请选择颜色值", type: "warning" })
                return
            }
            if (img_paths.value == "" && ruleColorForm.color_type == 1) {
                proxy.$message({ message: "请上传颜色图片", type: "warning" })
                return
            }
            form_loading.value = true
            let data = {
                title: ruleColorForm.name,
                type: ruleColorForm.color_type,
                order_by: ruleColorForm.sort,
            }
            if (ruleColorForm.color_type == 0) {
                data.color = ruleColorForm.color_rgb
            } else {
                data.color_img = img_paths.value
            }

            if (colorType.value == 2) {
                data.color_id = color_id.value
            }
            let url = colorType.value == 1 ? "product/color/add" : "product/color/update"
            proxy.$axios
                .post(url, data)
                .then((res) => {
                    form_loading.value = false
                    if (res.data.code == 0) {
                        dialogColor.value = false
                        proxy.$message({ message: `${colorType.value == 1 ? '添加成功！' : '编辑成功！'}`, type: "success" })
                        pubParams(getList)
                    } else {
                        proxy.$message({message:res.data.msg,type:"error"})
                    }
                })
                .catch((err) => {
                    form_loading.value = false
                })
        }
    })
}
const resetColorForm = (formEl) => {
    if (!formEl) return
    formEl.resetFields()
}
const addColor = () => {
    colorType.value = 1
    dialogColor.value = true
}
const closeAddColor = () => {
    dialogColor.value = false
    resetColorForm(ruleColorRef.value)
}
// 编辑
const clickEdit = (row) => {
    dialogColor.value = true
    setTimeout(() => {
        ruleColorForm.name = row.title
        ruleColorForm.sort = row.order_by
        ruleColorForm.color_rgb = row.color
        ruleColorForm.color_type = String(row.type)
        img_paths.value = row.color_img
        colorType.value = 2
        color_id.value = row.color_id
    }, 50)
}
// 删除单个
const clickDel = (row) => {
    postDel(row.color_id)
}

// 删除接口
function postDel(params) {
    proxy.$axios
        .post("product/color/delete", {
            color_id: params,
        })
        .then((res) => {
            if (res.data.code == 0) {
                pubParams(getList)
            } else {
                proxy.$message({message:res.data.msg,type:"error"})
            }
        })
        .catch((err) => {})
}

// 排序
const inputSort = (row) => {
    if (!row.order_by) {
        proxy.$message({ message: "请输入排序数字", type: "warning" })
        return
    }
    proxy.$axios
        .post("product/color/sort", {
            color_id: row.color_id,
            order_by: row.order_by,
        })
        .then((res) => {
            if (res.data.code == 0) {
                pubParams(getList)
            } else {
                proxy.$message({message:res.data.msg,type:"error"})
            }
        })
        .catch((err) => {})
}
</script>
<script>
export default {
    name: "GoodsColors",
}
</script>

<style lang="less" scoped>
.sku-column {
    display: flex;
    align-items: center;

    .sku-span {
        width: 20px;
        height: 20px;
        display: inline-block;
        margin-left: @margin-base;
    }

    .sku-img {
        width: 20px;
        height: 20px;
        margin-left: @margin-base;
    }
}

.prize-upload {
    display: flex;

    :deep(.el-upload--picture-card) {
        width: 100px !important;
        height: 100px !important;
    }

    :deep(.el-upload-list__item) {
        width: 100px !important;
        height: 100px !important;
    }
}
</style>
